<script setup lang="ts">
import { ref } from 'vue'
/* export default {
  props: ['msg'],
  setup() {
    const count = ref(0)
    const add = function () { 
      count.value++
    }
    return {
      count, add
    }
  }
}
 */

// 纯类型，减少了default配置
// defineProps<{ msg: string, arr: Array<number> }>()
// defineProps({
//   // msg: {
//   //   type: String,
//   //   default: ''
//   // },
//   msg: String,
//   arr: {
//     type: Array<number>,
//     default: () => []
//   }
// })

const props = withDefaults(
  defineProps<{ msg?: string, arr?: Array<number> }>(),
  {
    msg: 'hello world'
  }
)
const count = ref(0)
const add = function () {
  count.value++,
    emits('parentClick', 'Hello parent, I am son!')
}

// const emits = defineEmits(['parentClick'])
const emits = defineEmits<{
  (e: 'parentClick', data: string): void
}>()


</script>

<template>
  <el-button type="primary">点击</el-button>
  <h1>{{ msg }}</h1>
  <p @click="add">count: {{ count }}</p>
  <ul>
    <li v-for="(item, i) in arr" :key="i">
      {{ item }}
    </li>
  </ul>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}

ul {
  list-style: none;
}
</style>
